@theme {
  /* Base color scale */
  --color-base-50: oklch(1 0 0);
  --color-base-100: oklch(0.9699 0 0);
  --color-base-200: oklch(0.9218 0 0);
  --color-base-300: oklch(0.8697 0 0);
  --color-base-400: oklch(0.7077 0 0);
  --color-base-500: oklch(0.5557 0 0);
  --color-base-600: oklch(0.4387 0 0);
  --color-base-700: oklch(0.3707 0 0);
  --color-base-800: oklch(0.2688 0 0);
  --color-base-900: oklch(0.2048 0 0);
  --color-base-950: oklch(0.1449 0 0);
  --color-base-1000: oklch(0.1059 0 0);

  /* Primary color scale */
  --color-primary-50: oklch(0.953 0.019 25.6);
  --color-primary-100: oklch(0.9265 0.03 30.64);
  --color-primary-200: oklch(0.8366 0.071 30.62);
  --color-primary-300: oklch(0.7512 0.115 31.21);
  --color-primary-400: oklch(0.6744 0.16 32.12);
  --color-primary-500: oklch(0.6111 0.2 32.16);
  --color-primary-600: oklch(0.5278 0.178 32.26);
  --color-primary-700: oklch(0.4358 0.145 32.16);
  --color-primary-800: oklch(0.3369 0.107 32.44);
  --color-primary-900: oklch(0.2795 0.085 32.44);
  --color-primary-950: oklch(0.2211 0.067 32.44);
  --color-primary-1000: oklch(0.1627 0.05 32.44);

  /* Secondary color scale */
  --color-secondary-50: oklch(0.958 0.007 268.55);
  --color-secondary-100: oklch(0.9325 0.012 259.82);
  --color-secondary-200: oklch(0.8462 0.027 262.33);
  --color-secondary-300: oklch(0.7563 0.046 265.5);
  --color-secondary-400: oklch(0.5547 0.087 264.14);
  --color-secondary-500: oklch(0.4734 0.073 264.32);
  --color-secondary-600: oklch(0.3485 0.047 262.99);
  --color-secondary-700: oklch(0.2817 0.037 264.6);
  --color-secondary-800: oklch(0.2348 0.031 262.56);
  --color-secondary-900: oklch(0.236 0.029 266.34);
  --color-secondary-950: oklch(0.1895 0.033 266.34);
  --color-secondary-1000: oklch(0.1428 0.037 266.34);

  /* Sidebar specific colors */
  --color-sidebar-light: oklch(0.2348 0.0314 262.56);
  --color-sidebar-dark: oklch(0.3351 0.0331 260.91);

  /* Semantic colors for light mode */
  --color-background: var(--color-base-50);
  --color-foreground: var(--color-base-800);
  --color-card: var(--color-white);
  --color-card-foreground: var(--color-base-800);
  --color-popover: var(--color-white);
  --color-popover-foreground: var(--color-base-800);
  --color-primary: var(--color-primary-500);
  --color-primary-foreground: var(--color-white);
  --color-secondary: var(--color-secondary-900);
  --color-secondary-foreground: var(--color-white);
  --color-muted: var(--color-base-100);
  --color-muted-foreground: var(--color-base-600);
  --color-accent: var(--color-base-100);
  --color-accent-foreground: var(--color-base-800);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-border: var(--color-base-200);
  --color-input: var(--color-base-300);
  --color-ring: var(--color-selected);
  --color-chart-1: var(--color-primary-500);
  --color-chart-2: var(--color-secondary-900);
  --color-chart-3: var(--color-primary-300);
  --color-chart-4: var(--color-secondary-300);
  --color-chart-5: var(--color-primary-100);
  --color-sidebar: var(--color-sidebar-light);
  --color-sidebar-foreground: var(--color-base-200);
  --color-sidebar-primary: var(--color-primary-500);
  --color-sidebar-primary-foreground: var(--color-white);
  --color-sidebar-accent: oklch(1 0 0 / 8%);
  --color-sidebar-accent-foreground: var(--color-base-100);
  --color-sidebar-border: var(--color-base-600);
  --color-sidebar-ring: var(--color-primary-500);
  --color-selection: oklch(0.8462 0.027 262.33);
  --color-selection-foreground: var(--color-base-800);
  --color-sidebar-selection: oklch(0.5547 0.087 264.14);
  --color-sidebar-selection-foreground: oklch(1 0 0);
  --color-selected: oklch(0.2348 0.0314 262.56);
  --color-selected-foreground: oklch(1 0 0);

  /* Design tokens */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-elevated: 4px 4px 0px 0px oklch(0 0 0 / 0.08);
}

@custom-variant dark (&:is(.dark *));

.dark {
  --color-background: var(--color-base-950);
  --color-foreground: var(--color-base-200);
  --color-card: var(--color-base-900);
  --color-card-foreground: var(--color-base-200);
  --color-popover: var(--color-base-900);
  --color-popover-foreground: var(--color-base-200);
  --color-primary: var(--color-primary-500);
  --color-primary-foreground: var(--color-white);
  --color-secondary: var(--color-secondary-900);
  --color-secondary-foreground: var(--color-white);
  --color-muted: var(--color-base-800);
  --color-muted-foreground: var(--color-base-300);
  --color-accent: var(--color-base-800);
  --color-accent-foreground: var(--color-base-200);
  --color-destructive: oklch(0.704 0.191 22.216);
  --color-border: var(--color-base-800);
  --color-input: var(--color-base-700);
  --color-ring: var(--color-selected);
  --color-chart-1: var(--color-primary-500);
  --color-chart-2: var(--color-secondary-900);
  --color-chart-3: var(--color-primary-300);
  --color-chart-4: var(--color-secondary-300);
  --color-chart-5: var(--color-primary-100);
  --shadow-elevated: 4px 4px 0px 0px oklch(1 0 0 / 0.04);
  --color-sidebar: var(--color-sidebar-dark);
  --color-sidebar-foreground: var(--color-base-100);
  --color-sidebar-primary: var(--color-primary-500);
  --color-sidebar-primary-foreground: var(--color-white);
  --color-sidebar-accent: oklch(0 0 0 / 24%);
  --color-sidebar-accent-foreground: var(--color-base-100);
  --color-sidebar-border: var(--color-base-500);
  --color-sidebar-ring: var(--color-primary-500);
  --color-selection: oklch(0.8462 0.027 262.33);
  --color-selection-foreground: var(--color-base-200);
  --color-sidebar-selection: oklch(0.5547 0.087 264.14);
  --color-sidebar-selection-foreground: oklch(1 0 0);
  --color-selected: oklch(1 0 0);
  --color-selected-foreground: oklch(0.2348 0.0314 262.56);
}

@layer base {
  /* Global defaults */
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    overscroll-behavior: none;
  }

  /* Selection styles */
  ::selection {
    background-color: var(--color-selection);
    color: var(--color-selection-foreground);
  }

  [data-sidebar] *::selection,
  [data-slot*="sidebar"] *::selection {
    background-color: var(--color-sidebar-selection) !important;
    color: var(--color-sidebar-selection-foreground) !important;
  }

  /* Animation keyframes */
  @keyframes blink {
    50% {
      opacity: 0.6;
    }
  }

  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}
